$(document).ready(function () {
    $(".pie-div").each(function () {
        var values = [],
            labels = [];
        var data = jQuery.parseJSON($('pre', this).text());
        $(data, this).each(function () {
            labels.push(this.Key);
            values.push(parseInt(this.Value));
        });
        $('pre', this).hide();
        var holderId = $(".pie-holder", this).attr("id");
        var r = Raphael(holderId),
            pie = r.piechart(320, 240, 100, values, { legend: labels, legendpos: "east"});

        pie.hover(function () {
            this.sector.stop();
            this.sector.scale(1.1, 1.1, this.cx, this.cy);

            if (this.label) {
                this.label[0].stop();
                this.label[0].attr({ r: 7.5 });
                this.label[1].attr({ "font-weight": 800 });
            }
        }, function () {
            this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");

            if (this.label) {
                this.label[0].animate({ r: 5 }, 500, "bounce");
                this.label[1].attr({ "font-weight": 400 });
            }
        });
    });
});
